<template>
  <a-drawer
    v-model:visible="visible"
    :title="modalTitle"
    width="50%"
    :closable="false"
    :footer-style="{ textAlign: 'right' }"
  >
    <a-table
      :columns="columns"
      :data-source="state.data"
      style="width: 100%"
      rowKey="energy_log_id"
      :pagination="state.pagination"
      @change="pageChange"
      :loading="state.loading"
    ></a-table>
  </a-drawer>
</template>
  <script setup>
import { reactive } from "vue";
import { orderEnergyLog } from "@/api/order";
import useModal from "@/utils/useModal";

const { visible, modalTitle } = useModal();

const columns = [
  {
    title: "id",
    dataIndex: "energy_log_id",
    width: 100,
  },
  {
    title: "签到能量",
    dataIndex: "energy_number",
    width: 150,
  },
  {
    title: "比例",
    dataIndex: "rate",
    width: 150,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
];
const state = reactive({
  energy_id: "",
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  },
});

const show = (model) => {
  visible.value = true;
  modalTitle.value = "签到记录";
  state.energy_id = model.energy_id;
  getList(model);
};
const getList = () => {
  orderEnergyLog({
    id: state.energy_id,
    ...state.searchParams,
  }).then((res) => {
    if (res.code == 0) {
      setTimeout(function () {
        state.loading = false;
      }, 500);
      if (res.code == 0) {
        state.data = res.data.data;
        state.pagination.total = res.data.total;
      }
    }
  });
};
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;

  getList();
};
// 暴露方法
defineExpose({ show });
</script>
  